<template>
  <div class="item">

      <template v-if="router.children && router.children.length > 0">
        <el-submenu :index="router.path">
          <span slot="title">{{router.meta.title}}</span>
          <Item v-for="(child) in router.children.filter(v => !v.meta.hidden)" :key="child.path" />
        </el-submenu>
      </template>

      <template v-else>
        <el-menu-item :index="router.path">
          <i :class="router.meta.icon" v-if="router.meta.icon.includes('el-icon')" />
          <img :src="router.meta.icon" v-else />
          <span slot="title">{{router.meta.title}}</span>
        </el-menu-item>
      </template>

  </div>
</template>
<script>
import Item from './Item.vue'
export default {
  props: {
    router: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  components: { Item }
}
</script>
<style lang="scss" scoped>
.item img{
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
</style>
